<!--
 * @Description: 选择下级审批人
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-10-14 10:59:21
 * @LastEditTime: 2022-11-25 15:43:58
 * @FilePath: \cscec-pms-admin\src\views\matters\approval\components\consultation\SelectSubordinateApprover.vue
-->
<template>
  <a-modal
    title="选择审批人"
    :width="750"
    :visible="visible"
    :cancel-text="'关闭'"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-table
      :row-key="'id'"
      :columns="columns"
      :data-source="data"
      :pagination="false"
      bordered
    >
      <template
        slot="subordinateapprover"
        slot-scope="text, record"
      >
        <a-select
          v-model="record.approver"
          label-in-value
          mode="multiple"
          style="width: 100%"
          placeholder="请选择审批人"
        >
          <a-select-option
            v-for="{ userId, name } in record.assign"
            :key="userId"
            :value="userId"
          >
            {{ name }}
          </a-select-option>
        </a-select>
      </template>
    </a-table>
  </a-modal>
</template>
<script>
import { columns1 } from './model.js'
export default {
  name: 'SelectSubordinateapprover',
  components: {},
  props: {
    // 模态框显示隐藏
    visible: {
      type: Boolean,
      default: false
    },
    // 下级审批人列表
    subordinateApproverList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 表头
      columns: columns1,
      // 审批人数据
      data: []
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.data = this.$clone(this.subordinateApproverList)
        }
      }
    }
  },
  methods: {
    /**
     * @description: 确认
     * @return {void}
     */
    handleOk() {
      this.$emit('update:subordinateApproverList', [...this.data])
      this.handleCancel()
    },
    /**
     * @description: 取消
     * @return {void}
     */
    handleCancel() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="less" scoped>
</style>
